import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { checkbox } from '@knno/ui/checkbox';
import { group } from '@knno/ui/group';
import { radio } from '@knno/ui/radio';
import { list, SelectType } from '@knno/ui/list';
// import { button, checkbox, list, group, SelectType, radio } from '../../dist';
import { bar } from './index.css';

function addData(parent: any, pid: string) {
	const rows: unknown[] = [];
	for (let i = 1; i <= 10; i++) {
		const row = { id: pid + '-' + i, text: pid + '-' + i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
		rows.push(row);
	}
	parent.children = rows;
}

const DATA = [
	{
		text: '数据1',
		children: [
			{
				text: '数据1-1',
			},
			{
				text: '数据1-2',
				children: [
					{
						text: '数据1-2-1',
					},
					{
						text: '数据1-2-2',
					},
				],
			},
		],
	},
	{
		text: '数据2',
	},
	{
		text: '数据3',
		expand: true,
		children: [
			{
				text: '数据3-1',
			},
			{
				text: '数据3-2',
			},
		],
	},
];

export function renderList() {
	const ls = list('highligh-hover')
		.column({ text: 'text', children: 'children', expand: 'expand' })
		.on('rowexpand', (evt) => {
			if (evt.detail.expand) {
				if ((evt.detail.row as any).children.length === 0) {
					addData(evt.detail.row, (evt.detail.row as any).id as string);
				}
				ls.refresh('data');
			}
			// console.log(evt.detail.row);
		});
	return [
		dom.h2().text('数据列表（包括树列表）'),
		dom.div(bar).append(
			button()
				.type('primary')
				.text('添加数据（动态加载子节点）')
				.on('click', () => {
					const result = [];
					for (let i = 1; i <= 100; i++) {
						const row = { id: i + '', text: i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
						result.push(row);
						// result.push([]);
					}
					console.log('data generated!');
					ls.rows(result);
				}),
			button()
				.type('primary')
				.text('添加数据(完整)')
				.on('click', () => {
					ls.rows(DATA);
				}),
			button()
				.type('danger')
				.text('删除数据')
				.on('click', () => {
					ls.rows([]);
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.checked(false)
				.text('复选框')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							ls.selectable(true);
						} else {
							ls.selectable(false);
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.checked(false)
				.text('行选择')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							ls.activable(true);
						} else {
							ls.activable(false);
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			dom.text('选择方式：'),
			group()
				.append(
					radio().text('任意节点').value('any'),
					radio().text('仅叶子节点').value('leaf'),
					radio().text('级联选择').value('cascade')
				)
				.value(['any'])
				.ref((g) => {
					g.on('click', () => {
						ls.selectType(g.value()[0] as SelectType);
					});
				})
		),
		ls,
	];
}
